<template>
  <Drawer v-model:visible="visible" :title="title" width="50%" :destroyOnClose="true" placement="right">
    <div>
      <Card>
        <Descriptions bordered>
          <DescriptionsItem label="名称" :span="3">
            {{ detail.alarmRuleName }}
          </DescriptionsItem>

          <DescriptionsItem label="描述" :span="3">
            {{ detail.description }}
          </DescriptionsItem>
          <DescriptionsItem label="规则类型" :span="3">
            {{ detail.ruleType }}
          </DescriptionsItem>

          <DescriptionsItem label="指标名称" :span="1">
            {{ detail.metricName }}
          </DescriptionsItem>

          <DescriptionsItem label="指标维度" :span="1">
            {{ detail.dimensionsKey }}
          </DescriptionsItem>

          <DescriptionsItem label="维度取值" :span="1">
            {{ detail.dimensionsValue }}
          </DescriptionsItem>

          <DescriptionsItem label="統計周期" :span="1">
            {{ detail.period }}
          </DescriptionsItem>

          <DescriptionsItem label="統計方式" :span="2">
            {{ detail.statistic }}
          </DescriptionsItem>

          <DescriptionsItem label="阈值符号" :span="1">
            {{ detail.comparisonOperator }}
          </DescriptionsItem>

          <DescriptionsItem label="阈值" :span="2">
            {{ detail.threshold }}
          </DescriptionsItem>

          <DescriptionsItem label="间隔周期">
            {{ detail.evaluationPeriods }}
          </DescriptionsItem>

          <DescriptionsItem label="告警级别">
            {{ detail.alarmLevel }}
          </DescriptionsItem>
        </Descriptions>
      </Card>
    </div>

    <div class="absolute bottom-10 right-8">
      <Button style="margin-right: 8px; font-weight: bolder" @click="closeDrawer">取消</Button>
      <Button type="primary" style="font-weight: bolder" @click="closeDrawer">确定</Button>
    </div>
  </Drawer>
</template>

<script lang="ts" setup>
import { viewCceRuleDetail } from '../../../../../api/maintenance-center/alarm/alarm';
import { Drawer, Button, Card, Descriptions, DescriptionsItem } from 'ant-design-vue';
import { ref } from 'vue';
import { CceAlertRuleItem } from '/@/api/maintenance-center/alarm/model/alarmModel';

const visible = ref<boolean>(false);
const title = ref('CCE告警规则详情');
let detail: CceAlertRuleItem = ref();

const showDrawer = async (record: Recordable) => {
  let params = {
    alarmRuleId: record.alarmRuleId,
  };
  detail.value = await viewCceRuleDetail(params);
  detail.value.dimensionsKey = detail.value.dimensions[0].name;
  detail.value.ruleType = 'THRESHOLD';
  detail.value.dimensionsValue = detail.value.dimensions[0].value;
  visible.value = true;
};

const closeDrawer = async () => {
  visible.value = false;
};

defineExpose({ showDrawer });
</script>
